import React from 'react';
import { Row, Col, Empty } from 'antd';
import numeral from 'numeral';
import { RankingDataKind, RankingDataItem } from '@/types/dashboard';
import styles from '../style.less';

// 两种定义ts类型约束
// type KindType = {
//   [key in RankingDataKind]: string
// }
type KindType = Record<RankingDataKind, string>;

const kindCnName: KindType = {
  'alreadyPrdTradeTask': '已投产需求交易任务',
  'alreadyPrdWorkload': '已投产需求工作量',
  'notPrdTradeTask': '未投产需求交易任务',
  'notPrdWorkload': '未投产需求工作量'
};

interface ProjectRankingCardProps {
  kind: RankingDataKind;
  rankingDatas: RankingDataItem[];
}

/**
 * 项目排行榜
 * 
 * @param props 
 * @returns 
 */
const ProjectRankingCard: React.FC<ProjectRankingCardProps> = (props) => {

  const { kind, rankingDatas = [] } = props;
  const rankingTitle = kindCnName[kind];

  return (
    <Row style={{ display: 'block' }}>
      <Col>
        <div className={styles.salesRank}>
          <h4 className={styles.rankingTitle}>
            {rankingTitle}
          </h4>
          <ul className={styles.rankingList}>
            {rankingDatas.length> 0 ? rankingDatas.map((item, i) => (
              <li key={item.title}>
                <span className={`${styles.rankingItemNumber} ${i < 3 ? styles.active : ''}`}>
                  {i + 1}
                </span>
                <span className={styles.rankingItemTitle} title={item.tip}>
                  <a>{item.title}</a>
                </span>
                <span className={styles.rankingItemValue}>
                  {numeral(item.total).format('0,0')}
                </span>
              </li>
            )) : <Empty />}
          </ul>
        </div>
      </Col>
    </Row>
  );
}

export default ProjectRankingCard;